<template>
  <div class="shop_control">
    <div class="top">
      <div class="content">
        <div class="nav">
          <div></div>
          <p>搜索词管理</p>
        </div>
        <div class="top_btn">
          <el-button icon="el-icon-refresh" size="small" @click="refresh"
            >刷新</el-button
          >
          <el-button icon="el-icon-arrow-left" size="small">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 数据筛选 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>数据筛选</span>
      </div>
      <div class="child_box">
        服务协议标题<el-input
          v-model="SearchName"
          placeholder="请输入服务协议标题"
          size="medium"
          class="input_box"
        ></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" size="medium"
        >查询</el-button
      >
    </el-card>
    <el-card class="box-card box2">
      服务协议正文
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
        @ready="onEditorReady($event)"
      >
      </quill-editor>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "serviceDemo",
  components: {
    quillEditor,
  },
  // 富文本编辑器配置
  editorOption: {
    modules: {
      toolbar: [
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"], // 引用  代码块
        [{ header: 1 }, { header: 2 }], // 1、2 级标题
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
        [{ script: "sub" }, { script: "super" }], // 上标/下标
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        [{ direction: "rtl" }], // 文本方向
        [
          {
            size: ["12", "14", "16", "18", "20", "22", "24", "28", "32", "36"],
          },
        ], // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        // [{ font: ['songti'] }], // 字体种类
        [{ align: [] }], // 对齐方式
        ["clean"], // 清除文本格式
        ["image", "video"], // 链接、图片、视频
      ],
    },
    placeholder: "请输入正文",
  },
  data() {
    return {
      //搜索词
      SearchName: "",
    };
  },
  methods: {
    // 刷新页面
    refresh() {
      this.$router.go(0);
    },
    // 富文本框
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
  },
};
</script>

<style lang="scss" scoped>
.shop_control {
  background-color: #f5f5f5;
  height: 100vh;
  width: 100%;
}
//头部
.top {
  height: 50px;
  width: 100%;
  margin: 0 auto;
  background-color: #f3f3f3;
  border-bottom: 2px solid #e4e4e4;
  .content {
    margin: 0 auto;
    width: 1260px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav {
      width: 50%;
      height: 50%;
      display: flex;
      div {
        width: 3px;
        height: 100%;
        background-color: #00bfa0;
      }
      p {
        margin-left: 10px;
        height: 100%;
        line-height: 25px;
        font-size: 14px;
        color: #999999;
      }
    }
    .top_btn {
      width: 50%;
      text-align: right;
      .el-button {
        margin: 0;
        border-radius: 0;
        height: 50%;
      }
    }
  }
}
// 搜索词管理
.input_box {
  width: 200px;
  margin: 0 30px 0 10px;
}
.child_box {
  display: inline-block;
}
//数据筛选
.box-card {
  width: 1280px;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 0;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box2 {
  height: 66vh;
  // padding: 24px;
}
// 富文本编辑框
.quill-editor {
  width: 90%;
  height: 500px;
  float: right;
}
</style>